<template>
  <div class="main">
    <Head>岗位推荐</Head>
    <!--<List :videotype="'1'" :apitype="'0'"></List>-->
    <div class="dailyBox">
      <div class="dailyHead" :style="{backgroundImage: 'url(' + data.logo + ')'}">
<!--        <img :src="data.logo" alt="" class="img">-->
        <span class="title">{{ $store.state.config.sitename }}</span>
        <div class="describe">海量名企热招职位等你来选</div>
      </div>
      <div class="content">
        <div class="tabBox">
          <div class="tab">
            <span class="tabNum">{{ data.total_company }}</span>
            <span>参会企业</span>
          </div>
          <div class="tab">
            <span class="tabNum">{{ data.total_job }}</span>
            <span>可投职位</span>
          </div>
          <div class="tab">
            <span class="tabNum">{{ data.click }}</span>
            <span>浏览次数</span>
          </div>
        </div>
        <div class="searchBox">
          <div class="searchLeft">
            <div class="searchType" @click="filterItemShow = true">{{ filterText }}</div>
            <span class="line">|</span>
            <input type="text" class="searchInput" v-model="comJobKey" placeholder="请输入关键字">
          </div>
          <img src="../../assets/images/dailtyIcon.png" class="searchIcon" @click="input"/>
        </div>
        <div class="list">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="list.length == 0 ? '' : '没有更多了'"
              @load="onLoad"
            >
              <div v-if="list.length == 0" class="none" style="background: #fff;padding: 50px;border-radius: 6px">
                <img src="../../assets/images/dailtyNone.png" alt="">
                <span>暂无内容</span>
              </div>
              <div v-else>
                <div class="dailyCard" v-for="(item,index) of list" :key="index">
                  <div class="cardHead">
                    <div class="logo">
                      <img :src="item.logo_src ? item.logo_src : require('@/assets/images/empty_logo.jpg')" :alt="$store.state.config.sitename" >
                    </div>
                    <div class="info">
                      <div class="infoCon" @click="toCompanyDetail(item.id)">
                        <div class="name">{{ item.companyname }}</div>
                        <span>{{ item.trade_name }} | {{ item.scale_name }}</span>
                      </div>
                      <van-icon name="arrow" class="infoIcon" @click="toCompanyDetail(item.id)"/>
                    </div>
                  </div>
                  <div v-if="item.joblist.length == 0" class="none">
                    <img src="../../assets/images/dailtyNone.png" alt="">
                    <span>暂无发布职位</span>
                  </div>
                  <div v-else>
                    <div class="cardList" v-for="(job,i) of item.joblist" :key="i"
                         @click="toDetail(job.id)">
                      <div class="listTitle">
                        <span>{{ job.jobname }}</span>
                        <span class="pay">{{ job.wage_text }}</span>
                      </div>
                      <div class="listTag">
                        <van-tag class="tags">{{ job.district_name }}</van-tag>
                        <van-tag class="tags">{{ job.experience }}</van-tag>
                        <van-tag class="tags">{{ job.education }}</van-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </van-list>
          </van-pull-refresh>

        </div>
        <div class="footer">找工作，招人才，就上{{ $store.state.config.sitename }}<br>未经书面授权，不得转载本网站所有招聘信息<br><span v-if="$store.state.config.contact_tel">客服电话：{{ $store.state.config.contact_tel }}</span></div>
      </div>

    </div>

    <van-action-sheet
      v-model="filterItemShow"
      :actions="itemList"
      cancel-text="取消"
      close-on-click-action
      @select="onItemSelected"
    />
  </div>
</template>

<script>
  import http from '@/utils/http'
  import api from '@/api'
  export default {
    name: "dailyDetail",
    data(){
      return{
        filterItemShow:false,
        itemList: [{ name: '职位', tab: '1' },{ name: '企业', tab: '2' }],
        filterText: '职位',
        comJobKey:"",
        data:{},

        searchForm:{
          keyword:"",
          type:1
        },
        params:{
          page:1,
          pagesize:5,
          recruitment_today_id:this.$route.query.id
        },
        list:[],
        loading:false,
        finished:false,
        refreshing:false,
        total:0
      }
    },
    created(){
      http.get(api.recruitmentShow,{ id:this.$route.query.id }).then((res) => {
        const { code,data,message } = res;
        if (code == "200"){
         this.data = data
        } else {
          this.$toast.fail(message)
        }
      }).catch(() => {})
    },
    mounted(){
      window.scrollTo(0,0)
    },
    methods:{
      // 筛选选择
      onItemSelected (item) {
        this.filterText = item.name
        this.searchForm.type = item.tab
      },
      input(){
        this.searchForm.keyword = this.comJobKey
        this.params.page = 1;
        this.list = []
        this.init()
      },
      onRefresh(){
        this.finished = false;
        this.loading = true;
        this.params.page = 1;
        this.list = []
        this.init();
      },
      toDetail (id) {
        this.$router.push('/job/' + id)
      },
      init(){
        http.get(api.recruitmentComlist, {...this.params,...this.searchForm}).then((res) => {
          const { code,data,message } = res;
          if (code == "200"){
            if (data.items == 0){
              this.list = [];
              this.finished = true;
            }

            this.list.push(...data.items)
            this.total = data.total
            this.loading = false;

            if (this.list.length >= this.total) {
              this.finished = true;
            }
            this.params.page++
            this.refreshing = false
          } else {
            this.$toast.fail(message)
          }
        }).catch(() => {})
      },
      onLoad(){
        this.init();
      },
      toCompanyDetail(id) {
        this.$router.push('/company/' + id)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dailyBox{
    background: #062ad0;
    font-size: 14px;
    color: #fff;
    min-height: calc(100vh - 55px);
    .dailyHead{
      width: 100%;
      height: 280px;
      /*background: url("../../assets/images/dailyHeadImg.png") no-repeat 0 0;*/
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      .address{
        margin-top: 26px;
        font-size: 16px;
      }
      .title{
        margin: 16px 0 20px;
      }
      //img{
      //  width: 100%;
      //}
      .describe{
        padding: 8px 20px;
        background: #1b3ad0;
        text-align: center;
        font-size: 12px;
        border-radius: 50px;
        margin-top: -151px;
      }
    }
    .content{
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      min-height: 420px;
      padding-bottom: 80px;
      position: relative;
      background: url("../../assets/images/daily_bg.png") no-repeat bottom left /100%;
      .tabBox{
        width: 100%;
        height: 80px;
        background: url("../../assets/images/dailyTabImg.png") no-repeat 0 0;
        background-size: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .tab{
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          .tabNum{
            color: #ff8d2a;
            font-size: 29px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .searchBox{
    width: 100%;
    height: 36px;
    background: #ff8d2a;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: 60px;
    margin: 15px 0;
    padding-left: 2px;
    .searchLeft{
      height: 32px;
      width: 85%;
      background: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #6d6d6d;
      border-radius: 60px 0 0 60px;
      overflow: hidden;
      padding: 0 20px;
      .searchType{
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        font-size: 12px;
        &::after {
          content: '';
          width: 8px;
          height: 5px;
          margin-left: 5px;
          background: url("../../assets/images/jobfairol/3.png") 0 0 no-repeat;background-size: 8px 5px;
        }
      }
      .line{
        margin:0 8px;
        color: #B4B4B4;
        flex-shrink: 0;
      }
      .searchInput{
        border: 0;
        background: transparent;
        width: 100%;
        font-size: 12px;
      }
    }
    .searchIcon{
      width: 15px;
      margin-left: 15px;
    }

  }
  .dailyCard{
    background: #ffffff;
    color: #494949;
    border-radius: 6px;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 15px;
    /*&:last-child{*/
      /*margin-bottom: 0;*/
    /*}*/
    .cardHead{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .logo{
        width: 50px;
        height: 50px;
        border-radius: 4px;
        margin-right: 14px;
        flex-shrink: 0;
        overflow: hidden;
        background: #f7f8f9;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .info{
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        .infoCon{
          width: 92%;
          display: flex;
          flex-direction: column;
          color: #929292;
          font-size: 13px;
          .name{
            width: 100%;
            font-size: 15px;
            color: #444444;
            margin-bottom: 3px;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: bold;
          }
        }
        .infoIcon{
          display: block;
          color: #848484;
          font-size: 14px;
          flex-shrink: 0;
        }
      }
    }
    .cardList{
      border-bottom: 1px solid #f3f3f3;
      padding: 12px 0;
      &:last-child{
        border-bottom: 0;
        padding: 12px 0 0;
      }
      .listTitle{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        color: #494949;
        font-size: 15px;
        .pay{
          color: #fc6502;
        }
      }
      .listTag{
        margin-top: 8px;
        .tags{
          color: #a2a2a2;
          background: #f3f3f3;
          margin-right: 6px;
        }
      }
    }
  }
  .none{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999999;
    padding: 15px 0;
    img{
      width: 160px;
    }
  }

  .footer{
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 10px;
    color: #fff;
    padding: 15px 0 8px;
  }
</style>
<style>
  .list .van-list__finished-text{
    font-size: 10px;
    color: #aaa;
    line-height: 2;
  }
</style>
